import React ,{useEffect,useState}from 'react'
import { Swiper, Image } from 'react-vant';
import { Grid } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import {useDispatch,useSelector} from "react-redux"
import "../../utils/data"
import axios  from '../../api/axios';
import {SETLISTTYPE,LISTTYPE} from "../../types/router.d"



function Shouye() {
  const dispatch=useDispatch();
  useEffect(()=>{
    axios.get("/list").then(res=>{
      dispatch({
        type:SETLISTTYPE,
        payload:res.data.list
      })
    })
  },[])

  const list2=useSelector((state:any)=>{
    console.log(state.list)
    return state.list
  })

  const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
  ];
  return (
    <div>
      <div className="demo-swiper">
        <Swiper>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <Grid columnNum={5}>
        {Array.from({ length: 10 }, (_, i) => (
          <Grid.Item key={i} icon={<ShopO />} text="文字" />
        ))}
      </Grid>
      <div>
          <div className="box">
            {
              list2&&list2.map((item:LISTTYPE,index:number)=>{
                return <div className="box2" key={index}>
                  <img src={item.img} alt="" />
                  <p>{item.title}</p>
                  <p>{item.price}</p>
                </div>

              })
            }
          </div>
      </div>
    </div>
  )
}

export default Shouye